<template>
	<view class="my_container">
		<CustomNavbar :title="pageTitle" :style="navbarStyle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="body_banner">
					<!-- 平台消息 -->
					<view @tap="change(1)" class="body_banner_o">
						<image class="body_banner_image" src="../../static/imags/pingtai.png"></image>
						<view class="badge" v-if="platformBadge > 0">{{ platformBadge }}</view>
						<view :class="active == 1 ? 'head_active' : ''" class="body_banner_title">平台消息</view>
					</view>
					<!-- 芬姐推荐 -->
					<view @tap="change(2)" class="body_banner_t">
						<image class="body_banner_image" src="../../static/imags/reeeee.png"></image>
						<view class="badge" v-if="fenjieBadge > 0">{{ fenjieBadge }}</view>
						<view :class="active == 2 ? 'head_active' : ''" class="body_banner_title">芬姐推荐</view>
					</view>
					<!-- 会员推荐 -->
					<view @tap="change(3)" class="body_banner_tr">
						<image class="body_banner_image" src="../../static/imags/huiyuan.png"></image>
						<view class="badge" v-if="memberBadge > 0">{{ memberBadge }}</view>
						<view :class="active == 3 ? 'head_active' : ''" class="body_banner_title">会员消息</view>
					</view>
				</view>
			</view>
			<!-- 消息列表 -->
			<view class="container_body_item" v-if="dataList.length > 0">
				<view class="message_item" @longpress="handleLongPress(message)" @tap="handleClick(message, index)"
					v-for="(message, index) in dataList" :key="index">
					<view class="cover">
						<image v-if="message.avatar" class="message_icon" :src="message.avatar" />
						<image v-else class="message_icon" src="../../static/images/pingtai(1).jpg" />
					</view>
					<view class="message_content">
						<view class="message_title">{{ message.title }}</view>
						<view class="message_preview">{{ message.content }}</view>
					</view>
					<view class="right_item">
						<view class="message_time">{{ message.createTime.slice(0, 10) }}</view>
						<view class="message_badge" v-if="message.readStatus == 1">1</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无消息" v-else mode="list"></u-empty>
		</view>
		<!-- 中间加号按钮（浮动在原生 Tab 栏上方） -->
		<view class="center-btn" @click="handleAdd">
			<image src="../../static/images/wyfb.png" class="center-icon" />
		</view>
		<view class="center-btn1">
			<image src="../../static/images/zxkf.png" class="center-icon" />
			<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>
		</view>
		<u-modal duration='300' :closeOnClickOverlay="true" :show="show" :title="title" :content='content'
			@confirm='show = false'></u-modal>
	</view>
</template>
<script>
	import { mapState } from 'vuex'; // 关键导入
	import CustomNavbar from '@/components/CustomNavbar.vue';
	export default {
		components: { CustomNavbar },
		data() {
			return {
				dataList: [],
				pageTitle: '消息',
				navbarStyle: {},
				type: 1,
				active: 1,
				show: false,
				title: '平台消息',
				content: ''
				// platformBadge: 0, // 平台消息徽标数量
				// fenjieBadge: 0, // 芬姐推荐徽标数量
				// memberBadge: 0 // 会员推荐徽标数量
			};
		},
		onLoad() {
			uni.$on('updateMessage', (data) => {
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				this.getList()
			});
		},
		onShow() {
			this.getList();
		},
		computed: {
			...mapState(['userInfo', 'pubInfoUserInfo']),
			platformBadge() {
				return this.$store.state.unreadCountObj.plate;
			},
			fenjieBadge() {
				return this.$store.state.unreadCountObj.fenjie;
			},
			memberBadge() {
				return this.$store.state.unreadCountObj.member;
			}
		},
		methods: {
			handleAdd() {
				if (!this.userInfo.userId) {
					uni.navigateTo({ url: '/pages/index/index' });
					return;
				}
				uni.navigateTo({ url: '/page/add/add' });
			},
			//点击消息
			handleClick(item, index) {
				if (this.active == 1) {
					if (item.readStatus == 1) {
						console.log('未读消息');
						this.handleRead(item.id)
						this.$store.state.unreadCountObj.all = this.$store.state.unreadCountObj.all - 1
						this.$store.state.unreadCountObj.plate = this.$store.state.unreadCountObj.plate - 1
					}
					this.show = true
					this.content = item.content
				} else if (this.active == 2) {
					if (item.readStatus == 1) {
						this.handleRead(item.id)
						this.$store.state.unreadCountObj.all = this.$store.state.unreadCountObj.all - 1
						this.$store.state.unreadCountObj.fenjie = this.$store.state.unreadCountObj.fenjie - 1
					}
					uni.navigateTo({
						url: `/page/detail/index?id=${item.extInfoObj.id}&title=${item.extInfoObj.name}`
					});
				} else {
					if (item.readStatus == 1) {
						this.handleRead(item.id)
						this.$store.state.unreadCountObj.all = this.$store.state.unreadCountObj.all - 1
						this.$store.state.unreadCountObj.member = this.$store.state.unreadCountObj.member - 1
					}
					uni.navigateTo({
						url: `/page/detail/index?id=${item.extInfoObj.id}&title=${item.extInfoObj.name}&from=message`
					});
				}
				uni.setTabBarBadge({
					index: 2, // 消息 Tab 在 list 中的索引（从 0 开始）
					text: this.$store.state.unreadCountObj.all
				});
				this.dataList[index].readStatus = 0;
			},
			handleRead(id) {
				this.$https.post(this.$api.getReadMsg, { id: id }).then((res) => {
					if (res.code === 200) {
						console.log('已读');
					}
				});
			},
			// 新增长按处理
			handleLongPress(message) {
				uni.showModal({
					title: '删除确认',
					content: '确定要删除这条消息吗？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({ title: '删除中...' });
							try {
								const res = await this.$https.post(this.$api.deleteMsg, {
									id: message.id
								});
								if (res.code === 200) {
									// 删除本地数据
									this.dataList = this.dataList.filter((item) => item.id !== message.id);
									uni.showToast({ title: '删除成功' });
								}
							} catch (e) {
								console.error('删除失败:', e);
								uni.showToast({ title: '删除失败', icon: 'none' });
							} finally {
								uni.hideLoading();
							}
						}
					}
				});
			},
			//切换
			change(index) {
				if (this.active == index) {
					return;
				}
				this.active = index;
				this.type = index;
				this.getList();
			},
			//获取列表
			getList() {
				this.dataList = [];
				var requestData = { noticeType: this.type, pageSize: 100000 };
				try {
					this.$https.post(this.$api.getNewsList, requestData).then((res) => {
						if (res.code === 200) {
							this.dataList = res.data;
						}
					});
				} catch (e) {
					uni.showToast({ title: '请求失败', icon: 'none' });
				} finally {}
			},
			//获取数字标
			getBrage() {
				var requestData1 = { noticeType: 1, readStatus: 1, pageSize: 1 };
				var requestData2 = { noticeType: 2, readStatus: 1, pageSize: 1 };
				var requestData3 = { noticeType: 3, readStatus: 1, pageSize: 1 };
				this.$https.post(this.$api.getNewsList, requestData1).then((res) => {
					if (res.code === 200) {
						this.platformBadge = res.total;
					}
				});
				this.$https.post(this.$api.getNewsList, requestData2).then((res) => {
					if (res.code === 200) {
						this.fenjieBadge = res.total;
					}
				});
				this.$https.post(this.$api.getNewsList, requestData3).then((res) => {
					if (res.code === 200) {
						this.memberBadge = res.total;
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		height: 100vh;

		.center-btn {
			position: fixed;
			bottom: 40rpx;
			/* 原生 Tab 高度 + 安全区域 */
			right: -50rpx;
			transform: translateX(-50%);
			z-index: 9999;
			flex-direction: column;
			display: flex;
			align-items: center;

			.center-icon {
				width: 124rpx;
				height: 124rpx;
			}
		}

		.center-btn1 {
			position: fixed;
			bottom: 200rpx;
			/* 原生 Tab 高度 + 安全区域 */
			right: -25rpx;
			transform: translateX(-50%);
			z-index: 9999;
			flex-direction: column;
			display: flex;
			align-items: center;
			width: 100rpx;
			height: 120rpx;

			.center-icon {
				width: 150rpx;
				height: 120rpx;
			}

			button {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				background-color: transparent;
			}
		}

		/deep/ .navbar {
			display: flex;
			justify-content: center;
		}

		// width: 100%;
		// height: 1624rpx;
		.my_container_body {
			height: 100%;
			width: 750rpx;
			background: linear-gradient(180deg, #ddffde 0%, #ffffff 29%, #ffffff 100%);
			border-radius: 0rpx;

			// display: flex;
			// flex-direction: column;
			.my_container_body_head {
				width: 100%;
				height: 174rpx;
			}

			.my_container_body_body {
				height: 180rpx;
				width: 100%;
				margin-left: 56rpx;
				padding-top: 40rpx;

				.body_banner {
					width: 638rpx;
					display: flex;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					.head_active {
						color: #ec643c;
					}

					.body_banner_o {
						position: relative;
						height: 148rpx;
						width: 104rpx;

						.body_banner_image {
							width: 92rpx;
							height: 92rpx;
						}

						.body_banner_title {
							margin-top: 16rpx;
							width: 104rpx;
							text-align: center;
						}

						.badge {
							position: absolute;
							top: -8rpx;
							right: -8rpx;
							background: red;
							color: white;
							border-radius: 50%;
							font-size: 20rpx;
							padding: 0 8rpx;
							min-width: 36rpx;
							height: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
						}
					}

					.body_banner_t {
						position: relative;
						height: 148rpx;
						width: 104rpx;
						margin-left: 172rpx;

						.body_banner_image {
							width: 92rpx;
							height: 92rpx;
						}

						.body_banner_title {
							margin-top: 16rpx;
							width: 104rpx;
							text-align: center;
						}

						.badge {
							position: absolute;
							top: -8rpx;
							right: -8rpx;
							background: red;
							color: white;
							border-radius: 50%;
							font-size: 20rpx;
							padding: 0 8rpx;
							min-width: 36rpx;
							height: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
						}
					}

					.body_banner_tr {
						position: relative;
						height: 148rpx;
						width: 104rpx;
						margin-left: 172rpx;

						.body_banner_image {
							width: 92rpx;
							height: 92rpx;
						}

						.body_banner_title {
							margin-top: 16rpx;
							width: 104rpx;
							text-align: center;
						}

						.badge {
							position: absolute;
							top: -8rpx;
							right: -8rpx;
							background: red;
							color: white;
							border-radius: 50%;
							font-size: 20rpx;
							padding: 0 8rpx;
							min-width: 36rpx;
							height: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
						}
					}
				}
			}

			.container_body_item {
				margin-top: 20rpx;
				height: calc(100% - 400rpx);
				padding-bottom: 50rpx;
				overflow-y: scroll;

				.message_item {
					display: flex;
					align-items: center;
					padding: 20rpx 40rpx;

					.cover {
						width: 90rpx;
						margin-right: 20rpx;

						.message_icon {
							border-radius: 50%;
							width: 90rpx;
							height: 90rpx;
						}
					}

					.message_content {
						width: calc(100% - 240rpx);

						.message_title {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
						}

						.message_preview {
							// white-space: nowrap;
							// /* 禁止文本换行 */
							// overflow: hidden;
							// /* 隐藏超出范围的内容 */
							// text-overflow: ellipsis;
							/* 使用省略号 */
							font-size: 28rpx;
							color: #666;
							margin-top: 8rpx;
						}
					}

					.right_item {
						width: 150rpx;
						height: 88rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						font-size: 22rpx;

						.message_time {
							font-size: 24rpx;
							color: #999;
						}

						.message_badge {
							background: #ec643c;
							color: white;
							border-radius: 50%;
							font-size: 20rpx;
							width: 36rpx;
							height: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>